<template>
	<view>
		<!--顶部banner-->
		<view style="margin: 0px 5px;">
			<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :circular="true"
				style="border-radius: 5px; overflow: hidden; ">
				<swiper-item v-for="(item,index) in topbaners" :key="index">
					<image :src="item.image" style="width: 100%;height:100%;"></image>
				</swiper-item>
			</swiper>
		</view>

		<!--课本点读-->
		<view style="margin: 5px 5px; padding: 5px; border-radius: 5px;">
			<view style="display: flex;">
				<view class="section_title" style="flex: 1;">我的课本</view>
				<view style="line-height: 30px; padding-top: 2px;">
					<u-icon label="分享微信好友" size="16" name="share"></u-icon>
				</view>
			</view>
			<view>
				<view style="display: flex; background-color: #Eaeaea; padding: 5px; border-radius: 10px;">
					<view style="width: 90px; margin-right: 10px;">
						<image src="@/static/pep4a.jpg" style="width: 100%;height:120px;border-radius:5px;"></image>
					</view>
					<!--课本信息-->
					<view style="flex:1;">
						<view style="display: flex;">
							<view style="flex: 1; font-size: 18px; font-weight: bold;">四年级 上册</view>
							<view>
								<view style="background-color: #55aa00;color: #fff; text-align: center;">
									<view>
									</view>
								</view>
							</view>
						</view>
						<view>
							人教版(PEP)
						</view>
						<view>
							中国人民教育出版社
						</view>
						<view style="margin-top: 18px;">
							<u-grid col="2">
								<u-grid-item :customStyle="{width:100+'px'}">
									<view style="margin-right: 10px;padding: 5px; width: 100%;">
										<u-button size="small" icon="reload" style="width: 100%;"
											@click="handleSwitchBook">切换课本</u-button>
									</view>
								</u-grid-item>
								<u-grid-item :customStyle="{width:100+'px'}">
									<view style="padding: 5px; width: 100%;text-align: right;">
										<u-button type="primary" icon="play-circle" size="small"
											style="width: 100%;" @click="handlePlay">开始学习</u-button>
									</view>
								</u-grid-item>
							</u-grid>
						</view>
					</view>

				</view>
			</view>
		</view>

		<!--关联扩展学习功能-->
		<view style="padding: 5px 10px;">
			<view class="section_title">同步扩展</view>
			<view style="display: flex;">
				<view style="flex: 1;  margin: 2px;" @click="handleExtStudy('wordlist')">
					<view style="width: 100%; background-color: #5ac725; height: 35px;">
						<view style="float:left; margin-left:35%;"><u-icon color="#FFF" :customStyle="{paddingTop:10+'rpx'}" name="list-dot" :size="30"></u-icon></view>
					</view>
					<view style="width:100%; clear: both; background-color: #53c21d; color:#FFF;text-align: center;height: 35px; line-height: 35px;">词汇表</view>
				</view>
				<view style="flex: 1;  margin: 2px;" @click="handleExtStudy('checkword')">
					<view style="width: 100%; background-color: #f9ae3d; height: 35px;">
						<view style="float:left; margin-left:35%;"><u-icon color="#FFF" :customStyle="{paddingTop:10+'rpx'}" name="checkmark" :size="30"></u-icon></view>
					</view>
					<view style="width:100%; clear: both; background-color: #f1a532; color:#FFF;text-align: center;height: 35px; line-height: 35px;">辨认单词</view>
				</view>
				<view style="flex: 1; margin: 2px;" @click="handleExtStudy('wordbook')">
					<view style="width: 100%; background-color: #3c9cff; height: 35px;">
						<view style="float:left; margin-left:35%;"><u-icon color="#FFF" :customStyle="{paddingTop:10+'rpx'}" name="order" :size="30"></u-icon></view>
					</view>
					<view style="width:100%; clear: both; background-color: #398ade; color:#FFF;text-align: center;height: 35px; line-height: 35px;">生词本</view>
				</view>
			</view>
			<view style="display: flex;">
				<view style="flex: 1; margin: 2px;" @click="handleExtStudy('offwrite')">
					<view style="width: 100%; background-color: #f56c6c; height: 35px;">
						<view style="float:left; margin-left:41%;"><u-icon color="#FFF" :customStyle="{paddingTop:10+'rpx'}" name="order" :size="30"></u-icon></view>
					</view>
					<view style="width:100%; clear: both; background-color: #e45656; color:#FFF;text-align: center;height: 35px; line-height: 35px;">线下听写</view>
				</view>
				<view style="flex: 1; margin: 2px;" @click="handleExtStudy('readword')">
					<view style="width: 100%; background-color: #c654ff; height: 35px;">
						<view style="float:left; margin-left:41%;"><u-icon color="#FFF" :customStyle="{paddingTop:10+'rpx'}" name="order" :size="30"></u-icon></view>
					</view>
					<view style="width:100%; clear: both; background-color: #aa55ff; color:#FFF;text-align: center;height: 35px; line-height: 35px;">语音测评</view>
				</view>
				<view style="flex: 1; margin: 2px;" @click="handleExtStudy('wordpk')">
					<view style="width: 100%; background-color: #aaaaff; height: 35px;">
						<view style="float:left; margin-left:41%;"><u-icon color="#FFF" :customStyle="{paddingTop:10+'rpx'}" name="order" :size="30"></u-icon></view>
					</view>
					<view style="width:100%; clear: both; background-color: #9f9fee; color:#FFF;text-align: center;height: 35px; line-height: 35px;">单词PK</view>
				</view>
			</view>
		</view>
		
		<!--音标基础-->
		<view style="padding: 5px 10px;">
			<view class="section_title">音标学习</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				topbaners: [{
					image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					link: '',
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					title: '身无彩凤双飞翼，心有灵犀一点通',
					link: '',
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
					link: '',
				}]
			}
		},
		onLoad() {

		},
		methods: {
			handleSwitchBook() {
				uni.navigateTo({
					url: '/pages/index/booklist'
				})
			},
			handlePlay(){
				uni.navigateTo({
					url:'/pages/index/chapter'
				})
			},
			handleExtStudy(type){
				console.log("点击扩展功能");
				switch(type){
					case 'wordlist':
					uni.navigateTo({
						url:'/pages/wordlist/index'
					})
					break;
				}
			}
		}
	}
</script>

<style scoped>
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>